<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Programmatic Navigation</title>
</head>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<body>
<h1>Programmatic Navigation</h1>
<div id="app">

</div>
</body>
<script>
    /**
     * Aside from using <router-link> to create anchor tags for declarative navigation,
     * we can do this programmatically using the router's instance methods.
     *
     *      router.push(location, onComplete?, onAbort?)
     *
     * Note: Inside of a Vue instance, you have access to the router instance as $router. You can therefore call this.$router.push.
     *
     * To navigate to a different URL, use router.push. This method pushes a new entry into the history stack,
     * so when the user clicks the browser back button they will be taken to the previous URL.

       This is the method called internally when you click a <router-link>, so clicking <router-link :to="..."> is the equivalent of calling router.push(...).

         Declarative	Programmatic
         <router-link :to="...">	router.push(...)

        The argument can be a string path, or a location descriptor object. Examples:

         // literal string path
         router.push('home')

         // object
         router.push({ path: 'home' })

         // named route
         router.push({ name: 'user', params: { userId: '123' } })

         // with query, resulting in /register?plan=private
         router.push({ path: 'register', query: { plan: 'private' } })
     */


    /**
     *
     * 需求: /user/123  路径中带路径变量
     * router.push({ name: 'user', params: { userId } }) // -> /user/123
     * router.push({ path: `/user/${userId}` }) // -> /user/123
     *
     * // This will NOT work
     * router.push({ path: '/user', params: { userId } }) // -> /user
     *
     * The same rules apply for the to property of the router-link component.
     *
     */
        // 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter
        // and then call `Vue.use(VueRouter)`.

        // 1. Define route components.
        // These can be imported from other files
    const User = { template: '<div>{{$router.params.id}}</div>' }


    // 2. Define some routes
    // Each route should map to a component. The "component" can
    // either be an actual component constructor created via
    // `Vue.extend()`, or just a component options object.
    // We'll talk about nested routes later.
    const routes = [
        { path: '/user/:id', component: User },
    ]

    // 3. Create the router instance and pass the `routes` option
    // You can pass in additional options here, but let's
    // keep it simple for now.
    const router = new VueRouter({
        routes// ES6语法 short for `routes: routes`
    })


    // named route
    router.push({ name: 'user', params: { userId: '123' } });


    // 4. Create and mount the root instance.
    // Make sure to inject the router with the router option to make the
    // whole app router-aware.
    const app = new Vue({
        router
    }).$mount('#app')

    // Now the app has started!


</script>
</html>